#kalendar{width: 100%;}
#calendar {
  width: 50px;
  float: left;
  margin-top:7px;
  text-align:center;
}
#calendar img{ width:30px;}
/* 选择年月 的行 */
#kalendar tr#select{height:30px;}
#kalendar tr#select td{}
#kalendar tr#select td div div{display: inline-block;margin-right: 10px;}
.datetop{position: relative;padding-bottom: 12px;}

#select #year ul li input{display: none;}
#select #year ul li input,#select #month ul li input{width:100%; height: 26px; cursor:pointer; border: none; background: #f8f4f4; border: 1px solid #d8d8d8; color: #b5b5b5; line-height: 20px;}
#select #year ul li.selectChange,#select #month ul li.selectChange{}
#select #year ul li.selectChange select,#select #month ul li.selectChange select{border: none;font-family: 'Noto Sans SC',"PINGFANGHK", "PingFang-HK", PingFang SC, "Source Han Sans CN", "Microsoft YaHei", Open Sans, arial, 'Hiragino Sans GB';}
#select #year ul li.selectChange select,#select #month ul li.selectChange select{width: 110px;padding: 0 10px;height: 35px;line-height: 35px;border-radius: 35px;}
#select select:focus{outline:none;border: none;}
#select #year ul li.selectChange select option,#select #month ul li.selectChange select option{padding-left:5px;}
#select .backtoday{background: none;border: none;width: 110px;height: 35px;line-height:33px;box-sizing: border-box;text-align: center;}
#select .backtoday{border: 1px solid #e9ecf5;border-radius: 35px;text-align: center;}
#select .backtoday{position: absolute;right:0;top:0;}
#select select::-ms-expand { display: none; }
#select select{
	background: none;
   position: relative;
   background:#f7f8fa url(../img/select-arrow.svg) no-repeat center;
   background-position: 86% center;
   background-size: 18px auto;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
 }


#kalendar tr#week td ul{width: 100%;display: flex;justify-content: space-between;padding: 12px 0;}
#kalendar tr#week td ul li{width: 30px;text-align: center;box-sizing: border-box;font-size: 18px;font-weight: 500;}

/* 某月具体日期 的每一行 */

#kalendar tr#day ul.dayList{width: 100%;display: flex;justify-content: space-between;color: #444;}
#kalendar tr#day ul.dayList li{width: 30px;text-align: center;box-sizing: border-box;margin: 6px 0;cursor: pointer;}
#kalendar tr#day ul.dayList li span{height: 30px;line-height: 30px;display: inline-block;border-radius: 50%;overflow: hidden;width: 100%;}

/* 日期占用行数(4-6行)，将不需要显示的行隐藏 */
#kalendar tr#day ul.hide{display:none;}
/* 周末 的特殊样式 */
#week .weekend,#day .weekend{color:#ba2e2f;}

/* 下面几个样式注意顺序，选择器不能简写，否则日历中 今天 的样式会被鼠标滑过的样式替换 */
/* 鼠标经过某个日期 的特殊样式 */
#kalendar tr#day td ul.dayList li.mouseFloat{border-color: #ccc;}
/* 当天是周末 的特殊样式 */
#kalendar tr#day td ul.dayList li.todayWeekend{border-color: #ba2e2f; color: #ba2e2f;}
/* 当天 的特殊样式 */
#kalendar tr#day span{}
#kalendar tr#day ul.dayList li.onred{color:#ff0000;}
#kalendar tr#day ul.dayList li.onred span{font-weight:600;}
#kalendar tr#day ul.dayList li{position: relative;}
#kalendar tr#day ul.dayList li span{position: relative;z-index: 3;font-weight: 300;}
#kalendar tr#day ul.dayList li:before{position: absolute;width: 30px;height: 30px;background: var(--blue);border-radius: 50%;content: '';left:0;top:0;opacity: 0;}
#kalendar tr#day ul.dayList li.in:before{opacity: 1;display: block;}
#kalendar tr#day ul.dayList li.in span{color: #fff;}